<template>
  <div class="todo-list">
    <div class="list-item" v-for="(item, index) of list" :key="item">
      <div class="title">{{item}}</div>
      <div>
        <el-button type="warning" size="small" @click="update(index)">更新</el-button>
        <el-button type="danger" size="small" @click="remove(index)">删除</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TodoList",
  props: {
    list: {
      type: Array,
      default: ()=>[]
    }
  },
  methods:{
    // 点击删除按钮
    remove(index){
      this.$emit('remove', index);
    },
    // 点击更新按钮
    update(index){
      this.$emit('update', index);
    }
  }
};
</script>
<style lang="less" scoped>
.todo-list {
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;

    &:last-child {
      border-bottom: none;
    }

    .title {
      flex: 1;
      font-size: 16px;
    }
  }
}
</style>
